import * as React from "react";
import classNames from "classnames/bind";
import * as styles from "./status-view.css"
import { IEditorsState } from "../../core/model";

const cx = classNames.bind(styles);

export function StatusView (props: { editorsState: IEditorsState }) {
  const { editorsState } = props;
  const { editors, activeId } = editorsState;

  return (
    <div className={cx('status-bar')}>
      {editors.map(o => (
        <div key={o.id} className={cx('editor-status', { 'is-show': o.id == activeId })}>
          selected {o.selected}, line {o.cursor.rowNo}, col {o.cursor.colNo}, {o.lang}
        </div>
      ))}
    </div>
  );

}
